<template>
  <view class="name-form">
    <view class="form-header">
      <view class="header-title">{{ isEdit ? "编辑名称" : "查看名称" }}</view>
      <view v-if="!isEdit" class="edit-btn" @tap="toggleEdit">编辑</view>
    </view>

    <!-- 表单项 -->
    <view class="form-item" v-if="shop">
      <view class="label">名称</view>
      <input
        class="input"
        type="text"
        placeholder="请填写名称"
        v-model="shop.name"
        :disabled="!isEdit"
      />
    </view>

    <!-- 保存按钮 -->
    <view v-if="isEdit" class="btn-wrapper">
      <nut-button class="save-btn" type="primary" @tap="saveName"
        >保存</nut-button
      >
      <nut-button class="cancel-btn" @tap="toggleEdit">取消</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import http from "@/utils/http";

import { store } from "@/store/index";

// 直接解构store中的响应式状态
const { info, business } = store.storeState;

// 获取页面参数
const router = Taro.getCurrentInstance().router;
const editType = ref(router?.params?.type || "view"); // 默认为查看模式
const isEdit = ref(editType.value === "edit"); // 根据传入的类型判断是否可编辑

// 设置导航栏标题
Taro.setNavigationBarTitle({
  title: isEdit.value ? "编辑名称" : "查看名称",
});

// 名称表单数据
const nameForm = ref({
  id: "",
  name: business.value.name,
});

// 切换编辑模式
function toggleEdit() {
  isEdit.value = !isEdit.value;
  if (!isEdit.value) {
    // 如果取消编辑，重新加载数据
    loadNameInfo();
  }
}
const shop = ref<any>(null);
// 加载名称信息
function loadNameInfo() {
  // 这里应该调用API获取名称信息
  // 模拟API调用
  // setTimeout(() => {
  //   nameForm.value = {
  //     id: "1",
  //     name: "示例名称",
  //   };
  // }, 500);

  // 实际API调用示例
  http.post(`/api/merchant/getUserById`).then((res: any) => {
    console.log("res", res);
    if (res.code == 0 && res.data) {
      // nameForm.value = res.data;
      shop.value = res.data[0].columns;
    }
  });
}

// 保存名称信息
function saveName() {
  // 表单验证
  if (!shop.value.name) {
    Taro.showToast({ title: "请填写名称", icon: "none" });
    return;
  }

  // 模拟API调用
  Taro.showLoading({ title: "保存中..." });
  setTimeout(() => {
    Taro.hideLoading();
  }, 700);

  const param = {...shop.value};
  delete param.balanceA;
  delete param.balanceB;
  delete param.id;
  http.postQuery("/api/merchant/update", param).then((res) => {
    console.log("res", res);
    if (res.code == 0) {
      Taro.showToast({ title: "保存成功", icon: "success" });
    }
  });
}

onMounted(() => {
  // 加载名称信息
  loadNameInfo();
});
</script>

<style lang="scss">
.name-form {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .edit-btn {
      padding: 10rpx 30rpx;
      background-color: #ff6034;
      color: #fff;
      border-radius: 30rpx;
      font-size: 28rpx;
    }
  }

  .form-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: 500;
    }

    .input {
      width: 100%;
      height: 80rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 0 30rpx;
    margin-top: 40rpx;

    .save-btn {
      width: 100%;
    }

    .cancel-btn {
      width: 100%;
      background-color: #f5f5f5;
      color: #666;
    }
  }
}
</style>
